<template>
    <div class="template-remove">
        <button @click="checkItem()">Delete</button>

        <!-- 删除弹窗 -->
        <UxDialog :visible="dialog" @close="dialog = ''">

            <div class="dialog-remove">

                <!-- 不可删除 -->
                <template v-if="dialog == 'forbid'">
                    <img src="@/assets/images/template/dialog-notify.png" alt="">
                    <strong>This template has been applied to an unpaid order and cannot be deleted.</strong>
                    <button @click="dialog = ''" type="primary">Got it</button>
                </template>

                <!-- 可删除 -->
                <template v-if="dialog == 'remove'">
                    <img src="@/assets/images/template/dialog-delete.png" alt="">
                    <strong>Deleted templates cannot be restored. Are you sure you want to delete this template?</strong>
                    <button @click="removeItem()" type="primary">Confirm</button>
                </template>

                <UxLoading2 :loading="loading" />
            </div>

        </UxDialog>
    </div>

</template>
<script>
export default {
    props: {
        item: { type: Object, default: () => ({}) },
    },
    data () {
        return {
            loading: false,
            dialog: '',
        };
    },
    methods: {

        // 检查
        async checkItem () {

            this.loading = true;
            this.dialog = 'loading'

            let editable = await this.$http("storeTemplate.getEditable/" + this.item.id);
            if (editable.code === 0) {
                this.dialog = editable.data ? 'remove' : 'forbid';
                this.loading = false;
            } else {
                this.loading = false;
                this.dialog = '';
                this.$uxMessage.error(editable.msg || "Failed to duplicate template");
            }
        },


        // 删除
        async removeItem () {
            this.loading = true;
            let response = await this.$http("storeTemplate.remove/" + this.item.id);
            if (response.code === 0) {
                this.$uxMessage.success("Remove template successfully");
                this.loading = false;
                this.dialog = '';
                this.$emit('reload');
            } else {
                this.$uxMessage.error("Failed to remove template");
                this.loading = false;
                this.dialog = '';
            }
        },
    },
    created () {


    },
};
</script>
<style lang="scss" scoped>
.template-remove {
    & > button {
        border: none;
        background: none;
        margin: 0;
        width: 168px;
        height: 34px;
        box-sizing: border-box;
        padding: 0 8px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #555555;
        justify-content: flex-start;

        &:hover {
            background: #f6f6f6;
            color: #000;
        }
    }
}

.dialog-remove {
    width: 320px;
    height: 414px;
    box-sizing: border-box;
    padding: 72px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    img {
        width: 80px;
        height: 80px;
    }

    strong {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 16px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 22px;
    }
    button {
        margin-top: 70px;
        width: 100%;
    }

    .loading {
        border-radius: 8px;
    }
}
</style>
